import React from 'react';
import dashboardHeaderbg1 from '@/assets/dashboard_bg1.png';
import dashboardHeaderbg2 from '@/assets/dashboard_bg2.png';
import './index.less';

interface PageTitleProps {
  title?: string | React.ReactNode;
  content?: string | React.ReactNode;
  extra?: React.ReactNode;
  showLogo?: boolean;
  style?: React.CSSProperties;
}

const PageTitle: React.FC<PageTitleProps> = ({
  title = '',
  content,
  extra,
  showLogo = true,
  style,
}) => {
  return (
    <div className="mxf-page-header" style={style}>
      <div className="header-title">
        <img src={dashboardHeaderbg1} alt="header bg 01" className="page-header-bg" />
        <div>
          <div className="header-title_subtext">
            Momenta E<span style={{ color: '#f67d2c' }}>X</span>perience Framework
          </div>
          <div className="header-title_text">
            {showLogo && (
              <>
                Momenta <span>MXF</span>{' '}
              </>
            )}
            {title}
          </div>
          {content && <div className="header-title_content">{content}</div>}
        </div>
        <img src={dashboardHeaderbg2} alt="header bg 02" className="page-header-bg" />
      </div>
      {extra && <div>{extra}</div>}
    </div>
  );
};

export default PageTitle;
